禅モード (Zen mode)
Scrapboxでヘッダー固定してみたりカーソル点滅させてみたりして思ったけど、そこは元のままのほうが圧倒的に書くことに没頭できるデザインだったんだよね。バランス大事だな。
こんなツイートをしたあとで、「じゃあシンプル方面に寄せてみっか」と思いついたので書いてみた！
とにかく書くことに集中したいときにどうぞ！
元に戻したいときはリロードしてね。 オンオフできるようにしたよー！ 2017-10-18
もっとフォーカスしたい！本文だけ見たい！
code:script.js
scrapbox.PageMenu.addItem({
title: 'Zen mode',
onClick: e => {
var bg = 'white' // ここにお好きな背景色を入れてね（テーマの背景が黒なら black で）
var style = document.getElementById('__zen__')
if (style) { style.remove(); e.currentTarget.innerText = 'Zen mode'; return }
else e.currentTarget.innerText = String.fromCharCode(0x02713) + ' Zen mode'
var css = body, .page { background-color:${bg} !important; background-image:none !important } +
'.navbar:not(:hover), .line .telomere:not(:hover), .col-page-side:not(:hover) { opacity:0 }'
style = document.createElement('style')
style.setAttribute('id', '__zen__')
style.appendChild(document.createTextNode(css))
document.head.appendChild(style)
}
})
ちなみにヘッダーメニューとページメニュー、あとメタ情報 (テロメア) は、見えないだけでちゃんとあるよ。 マウスカーソルを近づけると見えます。下のサンプルGIFの最後でちょこっとやってる。
https://gyazo.com/6da7aa9eabec04cba05180a95c787cb5
見えないけどいつも同じ場所にあるヘッダーメニュー、いい感じ！
2017-10-18 リロードしなくても禅モードをオンオフできるようにした
2018-01-23 テロメアのクラス名変わったぽいので対応